<template>
  <div class="left">
    <div class="box">
      <CountAnalyse2
        v-if="activePanel.panelId === 'countAnalyseId'"
      ></CountAnalyse2>
      <!-- <CountAnalyse2></CountAnalyse2> -->
      <ToolbarLeft></ToolbarLeft>
      <QuickMap
        v-show="quickMapPanel.panelId"
        :class="quickMapPanel.panelId ? '' : 'close-left'"
      ></QuickMap>
    </div>
  </div>
</template>

<script>
import QuickMap from "@/views/left/quickmap/index.vue";

import ToolbarLeft from "./toolbar/index.vue";
import CountAnalyse2 from "./countAnalyse2/index.vue";
export default {
  components: {
    CountAnalyse2,
    ToolbarLeft,
    QuickMap,
  },
  data() {
    return {
      activeMenu: true,
    };
  },
  mounted() {},
  methods: {},
  computed: {
    quickMapPanel() {
      return this.$store.state.quickMapPanel;
    },
    activePanel() {
      return this.$store.state.activePanel;
    },
  },
};
</script>

<style scoped lang="less">
.left {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  .box {
    position: absolute;
    top: 80px;
    left: 0;
    display: flex;
    align-items: flex-end;
    height: calc(100% - 124px);
    .show-tree {
      margin-left: 0;
    }
    .hide-tree {
      margin-left: -416px;
    }
  }
  .subsystem-left {
    left: 20px;
  }
  .close-left {
    left: 60px;
  }
}
</style>
